<template>
    <div id="background"></div>
    <div class="bg-backdrop-layout"></div>
    <n-flex class="login-container">
        <n-flex class="login-width" justify="space-between" align="center">
            <n-grid cols="2" x-gap="16" responsive="screen">
                <n-grid-item span="1" class="left-panel">
                    <div class="logo">
                        <img src="@/assets/logo-min.png" alt="logo" />
                        <span>ApiAdmin</span>
                    </div>
                    <div class="slogan">---- 开箱即用的高质量中后台管理系统</div>
                </n-grid-item>
                <n-grid-item span="1">
                    <div style="padding: 0 1rem 0 1rem">
                        <h2
                            style="
                                font-size: 1.875rem;
                                line-height: 2.25rem;
                                margin: 4.5rem 0 3.5rem 0;
                                font-weight: 300;
                            "
                        >
                            登录
                        </h2>
                        <n-form
                            label-placement="left"
                            autocomplete="off"
                            :rules="compData.rules"
                            ref="formRef"
                            label-width="80"
                            layout="vertical"
                            :model="compData.form"
                        >
                            <n-form-item label="账号" path="username">
                                <n-input
                                    size="large"
                                    v-model:value="compData.form.username"
                                    placeholder="输入你的用户名"
                                >
                                    <template #suffix>
                                        <n-icon>
                                            <component :is="'ionicons5-HappyOutline'"></component>
                                        </n-icon>
                                    </template>
                                </n-input>
                            </n-form-item>
                            <n-form-item label="密码" path="password">
                                <n-input
                                    size="large"
                                    :show-password-on="'click'"
                                    type="password"
                                    v-model:value="compData.form.password"
                                    placeholder="输入你的密码"
                                />
                            </n-form-item>
                            <n-form-item label="验证码" path="code">
                                <n-grid cols="5" item-responsive>
                                    <n-grid-item span="3">
                                        <n-input
                                            size="large"
                                            v-model:value="compData.form.captcha"
                                            placeholder="输入验证码，随便填"
                                        />
                                    </n-grid-item>
                                    <n-grid-item span="2">
                                        <img
                                            :src="captchaUrl"
                                            width="100%"
                                            @click="refreshCaptcha"
                                            height="92%"
                                            alt=""
                                        />
                                    </n-grid-item>
                                </n-grid>
                            </n-form-item>
                            <n-space justify="space-between" :size="[10, 15]" vertical>
                                <n-button type="primary" style="width: 100%" @click="handleLogin">
                                    登录</n-button
                                >
                            </n-space>
                        </n-form>
                    </div>
                </n-grid-item>
            </n-grid>
        </n-flex>
    </n-flex>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import appStore from '@/pinia/app';
import localStore from '@/utils/localStore';
import { login, getCaptcha } from '@/api/login';

const router = useRouter();
const formRef = ref();
const app = appStore();
const compData = reactive({
    form: {
        username: 'admin',
        password: 'admin123',
        captcha: '331245',
        uuid: '',
        identity: 1
    },
    rules: {
        username: [{ required: true, message: '请输入你的用户', trigger: 'blur' }],
        password: [{ required: true, message: '请输入你的密码', trigger: 'blur' }],
        captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
    }
});
const captchaUrl = ref('');

const refreshCaptcha = () => {
    getCaptcha().then(result => {
        captchaUrl.value = result.data.img;
        compData.form.uuid = result.data.uuid;
    });
};
refreshCaptcha();

const handleLogin = (e: any) => {
    e.preventDefault();
    formRef.value?.validate((errors: any) => {
        if (!errors) {
            login(compData.form).then(result => {
                console.log('result :>> ', result);
                localStore.set('api_auth', result.data.apiAuth);
                app.userInfo = result.data;
                app.treeMenus = result.data.menu;
                app.permissions = result.data.access;

                router.push('/home');
            });
        }
    });
};
</script>

<style scoped lang="less">
#background {
    position: fixed;
    top: 0;
    left: 0;
    background-image: url('@/assets/login_bg_1.jpg');
    z-index: 1;
    width: 100%;
    height: 100%;
}

.bg-backdrop-layout {
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 2;
    backdrop-filter: blur(25px);
}

.login-container {
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: cover;
    z-index: 3;

    .login-width {
        width: 950px;
        margin-left: auto;
        margin-right: auto;
        background: #fff;
        padding: 10px;
        height: 500px;
        position: relative;
        top: 50%;
        margin-top: -255px;
        border-radius: 10px;
    }

    .left-panel {
        padding: 0 1.25rem 0 1.25rem;
        height: 491px;
        background-image: url('@/assets/xwc.svg');
        background-repeat: no-repeat;
        background-position: center 60px;
        background-size: contain;
    }

    .logo {
        display: flex;
        margin-top: 20px;
        color: #333;

        span {
            font-weight: 300;
            font-size: 28px;
            color: #165dff;
            margin-left: 15px;
        }

        img {
            width: 33px;
        }
    }

    .slogan {
        display: flex;
        font-weight: 300;
        justify-content: flex-end;
        margin-left: auto;
        font-size: 16px;
        line-height: 50px;
    }
}
</style>
